<template>
  <el-card shadow="hover">
    <div slot="header">
      <span>商家管理</span>
      <el-button type="primary" size="small" style="float: right;" @click="addShop">新建商家</el-button>
    </div>
    <el-table
      :data="shopList"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="logo"
        fixed="left"
        width="120"
        align="center"
        label="商家Logo">
        <template slot-scope="scope">
          <img :src="scope.row.logo" width="50" style="border-radius: 4px">
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        fixed="left"
        width="120"
        label="商家名称">
        <template slot-scope="scope">
          <el-popover
            title="商家简介"
            width="250"
            trigger="hover"
            :content="scope.row.introduction">
            <el-button slot="reference" type="text">{{ scope.row.name }}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="introduction"
        label="商家简介"
        width="220">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="220">
      </el-table-column>
      <el-table-column
        prop="goodsCount"
        label="商品量">
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="订单量">
      </el-table-column>
      <el-table-column
        prop="goodMarkTimes"
        label="好评量">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="orderNum"-->
        <!--label="状态">-->
        <!--<template slot-scope="scope">-->
          <!--<el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>-->
          <!--<el-tag v-else type="danger">禁用</el-tag>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column
        prop="createdTime"
        label="创建日期"
        width="140">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="changeStatus(scope.$index)">{{scope.row.status === 1 ? '禁用' : '启用'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  import {getShopList} from "../../api/shop";

  export default
  {
    name: "list",
    data() {
      return {
        shopList:  [{
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          status: 0,
          rate: 4.5,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          status: 1,
          rate: 2.5,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          status: 1,
          rate: 3,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          status: 0,
          rate: 4,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          title: 'XXX商家',
          address: '江苏省南京市鼓楼区XX街道XX号',
          itemNum: 100,
          orderNum: 200,
          status: 1,
          rate: 1.5,
          logo: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }],
        currentPage: 1,
        pageSize: 10,
        total: 20,
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      addShop() {
        this.$router.push('/shop/create')
      },
      edit(id) {
        this.$router.push('/shop/edit/' + id)
      },
      changeStatus(index) {
        this.shopList[index].status = this.shopList[index].status === 1 ? 0 : 1;
      },
      async getShopList() {
        let res = await getShopList();
        this.shopList = res.shops;
      }
    },
    created() {
      this.getShopList()
    }
  }
</script>

<style scoped>

</style>
